<template>
  <div id="instrSetupFormPoctDiv">
    <div class="toolbartitle">基本信息</div>
    <el-scrollbar style="height: calc(100% - 40px)">
      <el-form ref="labreportform" :rules="formRules" :model="form" class="form-input-m baseForm" label-width="120px" inline-message inline>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="所属检验组" prop="workGroup">
              <el-select v-model="form.workGroup" filterable placeholder="请选择检验组" style="width: 200px;">
                <el-option v-for="workGroup in workGroupList" :key="workGroup.id" :label="workGroup.name" :value="workGroup.code"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="对应报告单元" prop="reportGroupName">
              <SelectDataList ref="employeeSelectRef" :url="'/api/rptGroup/findPoctRptGroup'" :displayField="[
                  { title: '编码', props: 'rptGroup' }, //列标题
                  { title: '名称', props: 'rptGroupName' }
                ]" :placeholder="'点击选择对应报告单元'" :searchParam="{
                  //seachValue: form.rptGroupName //参数3
                }" v-model="form.reportGroupName" @selectDataRow="SelectRowClick" @clearValue="clearValueHandler" @sliceValue="sliceHandler" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="仪器ID" prop="instrId">
              <el-input v-model="form.instrIdNo"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="仪器代号" prop="instrCode">
              <el-input v-model="form.instrCode"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="仪器名称" prop="instrName">
              <el-input v-model="form.instrName" @blur="addInputCode()"></el-input> </el-form-item></el-col>
          <el-col :span="12">
            <el-form-item label="助记符">
              <el-input v-model="form.inputCode"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="仪器简介" prop="instrCalled">
              <el-input v-model="form.instrCalled"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="仪器型号" prop="instrMark">
              <el-input v-model="form.instrMark"></el-input> </el-form-item></el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="仪器类别" prop="instrClass">
              <!-- <el-input v-model="form.instrClass" /> -->
              <el-select v-model="form.instrClass" placeholder="请选择" style="width:200px">
                <el-option v-for="item in instrClassDict" :key="item.code" :label="item.name" :value="item.code" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="仪器注册码" prop="instrRegister">
              <el-input v-model="form.instrRegister"></el-input> </el-form-item></el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="计算机IP">
              <el-input v-model="form.computerIp"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="安装计算机名称">
              <el-input v-model="form.setupComputer"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="计算机MAC地址">
              <el-input v-model="form.setupComputerMac"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="安装时间">
              <el-date-picker v-model="form.setupInstallDate" type="datetime" placeholder="安装时间" clearable></el-date-picker> </el-form-item></el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="重装时间">
              <el-date-picker v-model="form.setupResetDate" type="datetime" placeholder="重装时间" clearable></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="是否在用" prop="isUse">
              <!-- <vxe-switch
                v-model="form.isUse"
                open-label="是"
                close-label="否"
                open-value="0"
                close-value="1"
              ></vxe-switch> -->

              <el-switch v-model="form.isUse" inline-prompt active-text="是" inactive-text="否" active-value="1" inactive-value="0"></el-switch>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="停用时间">
              <el-date-picker v-model="form.instrStopDate" type="datetime" placeholder="停用时间" clearable></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="安装位置">
              <el-input v-model="form.installDept"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="仪器用途">
              <el-input v-model="form.instrUse"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="注册时间">
              <el-date-picker v-model="form.instrRegisterDate" type="datetime" placeholder="注册时间" clearable></el-date-picker> </el-form-item></el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="接口代号">
              <el-input v-model="form.interfaceCode"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="接口类型">
              <el-input v-model="form.interfaceType"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="运行时间">
              <el-date-picker v-model="form.runTime" type="datetime" placeholder="运行时间" clearable></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="运行ID">
              <el-input v-model="form.runId"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="退出时间">
              <el-date-picker v-model="form.outTime" type="datetime" placeholder="退出时间" clearable></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="运行电脑">
              <el-input v-model="form.runComputer"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="运行电脑IP">
              <el-input v-model="form.runComputerIp"></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="是否质控" prop="isQc">
              <el-switch v-model="form.isQc" inline-prompt active-text="是" inactive-text="否"></el-switch>
            </el-form-item>
          </el-col>
          <!-- <el-col :span="12">
            <el-form-item label="是否POCT" prop="poct">
              <el-switch v-model="form.poct" inline-prompt active-text="是" inactive-text="否" :active-value="1" :inactive-value="0"></el-switch>
            </el-form-item>
          </el-col> -->
        </el-row>

        <el-form-item>
          <div class="btnBox">
            <el-button type="primary" @click="handleAdd()">新建</el-button>
            <el-button type="primary" v-loading="showLoading" @click="save()">保存</el-button>
            <el-button type="default" @click="handleAdd()">重置</el-button>
          </div>
        </el-form-item>
      </el-form>
    </el-scrollbar>
  </div>
</template>

<script lang="ts" setup>
// 引入组件区 ==========
import { ref, reactive, getCurrentInstance, PropType, onMounted } from 'vue';
import { VXETable, VxeFormPropTypes, VxeButtonEvents } from 'vxe-table';
import { VxeMessage, VxeNotifyType } from '@/utils/CommonMessage';
import { funBdsJsResult } from '@/utils/Expression'; //函数公式
import { pageSizes, formatDateTime } from '@/utils/common';
import SelectDataList from '@/components/SelectDataList.vue';

import VxePulldownSelection from '@/components/VxePulldownSelection.vue'; //对应报告单元下拉组件
import VxePulldownSelectIconfont from '@/components/VxePulldownSelectIconfont.vue';

// 全局变量定义区 ==========
let { proxy }: any = getCurrentInstance();

let workGroupList: any = reactive([]); //检验组option下拉数据

// 基本信息form表单
let form = reactive({
  id: '',
  workGroup: '',
  instrCode: '',
  instrIdNo: '',
  instrName: '',
  instrMark: '',
  instrClass: '',
  instrRegister: '',
  instrRegisterDate: '',
  rptGroup: '',
  instrCalled: '',
  setupComputer: '',
  setupComputerMac: '',
  setupInstallDate: '',
  setupResetDate: '',
  instrStopDate: '',
  computerIp: '',
  installDept: '',
  instrUse: '',
  isUse: '',
  interfaceCode: '',
  interfaceType: '',
  OrgId: '',
  runComputerIp: '',
  runComputer: '',
  outTime: '',
  runId: '',
  runTime: '',
  inputCode: '',
  reportGroupName: '',
  hisEmployeeCode: '',
  isQc: false,
  poct: 0
});

// form表单校验规则
let formRules: any = {
  workGroup: [
    {
      required: true,
      message: '请选择检验组',
      trigger: 'change'
    }
  ],
  // reportGroupName: [
  //   {
  //     required: true,
  //     message: '请选择对应报告单元',
  //     trigger: 'change'
  //   }
  // ],
  instrIdNo: [
    {
      required: true,
      message: '请输入仪器ID',
      trigger: 'blur'
    }
  ],
  instrCode: [
    {
      required: true,
      message: '请输入仪器代号',
      trigger: 'blur'
    }
  ],
  instrName: [
    {
      required: true,
      message: '请输入仪器名称',
      trigger: 'blur'
    }
  ],
  instrCalled: [
    {
      required: true,
      message: '请输入仪器简介',
      trigger: 'blur'
    }
  ],
  instrMark: [
    {
      required: true,
      message: '请输入仪器型号',
      trigger: 'blur'
    }
  ],
  instrClass: [
    {
      required: true,
      message: '请输入仪器类别',
      trigger: 'blur'
    }
  ],
  instrRegister: [
    {
      required: true,
      message: '请输入仪器码',
      trigger: 'blur'
    }
  ]
};

let labreportform = ref(null); //form表单标记ref

let showLoading = ref(false); //保存按钮
let instrClassDict = reactive([]); //仪器大类字典
getInstrClassDict();
//获取仪器大类字典
function getInstrClassDict() {
  instrClassDict.length = 0;
  const url = '/api/sys/basDictDetail/findDictDetailList';
  proxy.$http
    //注意此处的数据条数
    .get(url, {
      params: { code: 'YQDL' }
    })
    .then((res: any) => {
      instrClassDict.push(...res.data);
    })
    .catch((err: any) => {
      // VxeMessage('获取获取当前字典的字段列表失败',VxeNotifyType.error)
    });
}

// 方法定义区 =============
defineExpose({ initPage, clearFormData });

// 左侧表格点击当前行传过来的数据
function initPage(row: any) {
  const el: any = proxy.$refs['labreportform'];
  el.clearValidate();
  if (row !== null) {
    for (let prop in row) {
      form[prop] = row[prop];
    }
  }
}

onMounted(() => {
  getDictDetailList(); //获取检验组option下拉数据
});

// 获取检验组option下拉数据
function getDictDetailList() {
  workGroupList.length = 0;
  const url = '/api/sys/basDictDetail/findDictDetailList';
  proxy.$http
    .get(url, { params: { code: 'JYGZZ' } })
    .then((res: any) => {
      //console.log('reportTypeList---------------',reportTypeList);
      workGroupList.push(...res.data);
    })
    .catch((err: any) => {
      VxeMessage('获取检验组option下拉数据异常', VxeNotifyType.error);
    });
}

// 填写仪器名称 自动生成助记符
function addInputCode() {
  form.inputCode = funBdsJsResult('firstPinYinFun', form.instrName);
}

//清空数据
function clearFormData() {
  for (let key in form) {
    form[key] = '';
  }
  form.poct = 1;
  const el: any = proxy.$refs['labreportform'];
  el.resetFields(); //重置该表单项，将其值重置为初始值，并移除校验结果
}

// 新增按钮 + 重置按钮
function handleAdd() {
  clearFormData();
}

// 保存按钮
function save() {
  const el: any = proxy.$refs['labreportform'];
  if (!el) return;
  el.validate((valid: any) => {
    if (!valid) {
      return false;
    }
    if (form.id !== '' && form.id !== null) {
      showLoading.value = true;
      proxy.$http
        .post('/lis/instrSetup/edit', form)
        .then((res: any) => {
          if (res.status.code === 1) {
            VxeMessage('修改检验仪器基本信息成功', VxeNotifyType.success);
            proxy.$emit('getTableData'); //触发父组件重新获取表格数据
          } else {
            proxy.$emit('getTableData'); //触发父组件重新获取表格数据
            return;
          }
        })
        .catch((err: any) => {
          VxeMessage('修改检验仪器基本信息异常', VxeNotifyType.error);
        });
    } else {
      proxy.$http
        .post('/lis/instrSetup/addInstrSetup', form)
        .then((res: any) => {
          if (res.status.code === 1) {
            VxeMessage('新增检验仪器成功', VxeNotifyType.success);
            proxy.$emit('getTableData'); //触发父组件重新获取表格数据
          } else {
            proxy.$emit('getTableData'); //触发父组件重新获取表格数据

            return;
          }
        })
        .catch((err: any) => {
          VxeMessage('新增检验仪器异常', VxeNotifyType.error);
        });
    }
    showLoading.value = false;
    clearFormData(); //清空数据
  });
}
let employeeSelectRef: any = ref(null);

let visibleOutReporter: any = ref(false);
// 组件
//点击选择的那一项受检单位
function SelectRowClick(row) {
  form.reportGroupName = row.rptGroupName;
  form.rptGroup = row.rptGroup;
  visibleOutReporter.value = false;
}
// 清空组件输入框
function clearValueHandler() {
  form.reportGroupName = '';
  form.rptGroup = '';
}
// 键盘事件删除输入框文字
function sliceHandler() {
  let newStr = form.reportGroupName.slice(0, -1);
  form.reportGroupName = newStr;
}
</script>

<style lang="scss" scoped>
#instrSetupFormPoctDiv {
  height: 100%;

  :deep(.el-scrollbar__view) {
    height: 100%;
  }
  .baseForm {
    height: calc(100% - 40px);

    .el-row {
      margin-left: 10px !important;
      margin-right: 0 !important;
    }

    .form-footer {
      margin-left: 130px;
    }

    .el-form-item--large {
      margin-bottom: 4px;
    }
  }
  .btnBox {
    width: 100%;
    margin-left: 140px;
  }
}
</style>
